<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="./css/miCar.css">
  <style>
    #AfterLoggingIn,
    #settlement {
      display: none;
    }
  </style>
</head>

<body>
  <div class="jacket">
    <header>
      <a href="./homepage1.html">
        <div class="icon"> ⟨ </div>
      </a>
      <b>购物车</b>
      <div class="icon"><span>编辑</span></div>
    </header>
    <!-- 登录购物车 -->
    <main>
      <!-- 登录前 -->
      <div class="login" id="beforeLoggingIn">登录后享受更多优惠
        <a href="./login.html">去登录 ></a>
      </div>
      <div class="data-box" id="beforeLoggingIns">
        <div class="picture"><img src="./img/no_result_mi_cart.png" alt=""></div>
        <p>购物车还是空的</p>
        <div class="product">随便看看</div>
      </div>
      <!-- 登录后 -->
      <div class="shopping-cart" id="AfterLoggingIn">
        <h6>
          <!-- <input type="checkbox" id="selectAll">  -->
          小米自营
        </h6>
        <div class="buy-products">
          <!-- 勾选 -->
          <div class="tick"><input type="checkbox"></div>
          <!-- 商品信息 -->
          <div class="product-information">
            <!-- 图片 -->
            <div class="picture"><img src="./img/redmi14.png" alt=""></div>
            <!-- 文字 -->
            <div class="text">
              <div class="product-name">xiaomi 14</div>
              <div class="product-type"><span>六期免息</span></div>
              <div class="product-price">
                <p>￥4599</p>
                <div class="quantity"><span class="reduce">- </span><span>1</span><span class="add">+</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="buy-products">
          <!-- 勾选 -->
          <div class="tick"><input type="checkbox"></div>
          <!-- 商品信息 -->
          <div class="product-information">
            <!-- 图片 -->
            <div class="picture"><img src="./img/redmi15.png" alt=""></div>
            <!-- 文字 -->
            <div class="text">
              <div class="product-name">xiaomi 15</div>
              <div class="product-type"><span>24期免息</span></div>
              <div class="product-price">
                <p>￥4599</p>
                <div class="quantity"><span class="reduce">- </span><span>1</span><span class="add">+</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 精选好物—商品 -->
    <footer>
      <h3>——精选好物——</h3>
      <div class="product-data">
        <div class="product-data-box">
          <img src="./img/redmi1.png" alt="">
          <p>Redmi Note 14 Pro+</p>
          <span>六期</span><span>限赠</span>
          <div class="text">1999￥</div>
        </div>
        <div class="product-data-box">
          <img src="./img/redmi10.png" alt="">
          <p>xiaomi Note 14 Pro+</p>
          <span>六期</span><span>限赠</span>
          <div class="text">1999￥</div>
        </div>
        <div class="product-data-box">
          <img src="./img/1fa94efe46740e12f1612d8a8182824f.png" alt="">
          <p>小米手环</p>
          <span>六期</span>
          <div class="text">599￥</div>
        </div>
        <div class="product-data-box">
          <img src="./img/03b4bf93894a1297a7f1c74d46446fac.png" alt="">
          <p>小米蓝牙耳机</p>
          <span>三期</span>
          <div class="text">99￥</div>
        </div>
      </div>
    </footer>
    <!-- 结算 -->
    <div class="settlement" id="settlement">
      <div class="marquee">
        <input type="checkbox" id="selectAlls">全选
      </div>
      <div class="content">
        <p>合计: <span id="totalPrice">￥0</span> </p>
      </div>
      <div class="settlement-price">
        <span>结算</span>
      </div>
    </div>


    <!--  <script>
      document.addEventListener('DOMContentLoaded', () => {
        const beforeLoggingIn = document.getElementById('beforeLoggingIn');
        const beforeLoggingIns = document.getElementById('beforeLoggingIns');
        const AfterLoggingIn = document.getElementById('AfterLoggingIn');
        const settlement = document.getElementById('settlement');
        const selectAll = document.getElementById('selectAll');
        const selectAlls = document.getElementById('selectAlls');
        const products = document.querySelectorAll('.buy-products .tick input[type="checkbox"]');
        const totalPrice = document.getElementById('totalPrice');

        const tokenValue = sessionStorage.getItem('myToken');

        function calculateTotal() {
          let total = Array.from(products).reduce((sum, product) => {
            const priceElement = product.closest('.buy-products').querySelector('.product-price p');
            return product.checked ? sum + parseFloat(priceElement.textContent.substring(1)) : sum;
          }, 0);
          totalPrice.textContent = `￥${total}`;
        }

        function toggleCheckboxes(checkbox, checkboxes) {
          checkboxes.forEach((cb) => cb.checked = checkbox.checked);
          calculateTotal();
        }

        selectAll.addEventListener('change', () => toggleCheckboxes(selectAll, products));
        selectAlls.addEventListener('change', () => toggleCheckboxes(selectAlls, products));

        products.forEach((product) => {
          product.addEventListener('change', calculateTotal);
        });

        if (tokenValue) {
          beforeLoggingIn.style.display = 'none';
          beforeLoggingIns.style.display = 'none';
          AfterLoggingIn.style.display = 'block';
          settlement.style.display = 'flex';
        } else {
          beforeLoggingIn.style.display = 'block';
          beforeLoggingIns.style.display = 'block';
          AfterLoggingIn.style.display = 'none';
          settlement.style.display = 'none';
        }

        calculateTotal();
      });
    </script> -->

    <script>document.addEventListener('DOMContentLoaded', () => {
        const beforeLoggingIn = document.getElementById('beforeLoggingIn');
        const beforeLoggingIns = document.getElementById('beforeLoggingIns');
        const AfterLoggingIn = document.getElementById('AfterLoggingIn');
        const settlement = document.getElementById('settlement');
        const selectAll = document.getElementById('selectAll');
        const selectAlls = document.getElementById('selectAlls');
        const products = document.querySelectorAll('.buy-products .tick input[type="checkbox"]');
        const totalPrice = document.getElementById('totalPrice');

        const tokenValue = sessionStorage.getItem('myToken');

        function calculateTotal() {
          let total = Array.from(products).reduce((sum, product) => {
            const priceElement = product.closest('.buy-products').querySelector('.product-price p');
            return product.checked ? sum + parseFloat(priceElement.textContent.substring(1)) : sum;
          }, 0);
          totalPrice.textContent = `￥${total}`;
        }

        function toggleCheckboxes(checkbox, checkboxes) {
          checkboxes.forEach((cb) => cb.checked = checkbox.checked);
          calculateTotal();
        }

        if (tokenValue) {
          // 用户已登录
          beforeLoggingIn.style.display = 'none';
          beforeLoggingIns.style.display = 'none';
          AfterLoggingIn.style.display = 'block';
          settlement.style.display = 'flex';
        } else {
          // 用户未登录
          beforeLoggingIn.style.display = 'block';
          beforeLoggingIns.style.display = 'block';
          AfterLoggingIn.style.display = 'none';
          settlement.style.display = 'none';
        }

        // 事件监听器
        selectAll.addEventListener('change', () => toggleCheckboxes(selectAll, products));
        selectAlls.addEventListener('change', () => toggleCheckboxes(selectAlls, products));

        products.forEach((product) => {
          product.addEventListener('change', calculateTotal);
        });

        calculateTotal();
      });</script>
  </div>
</body>

</html>